Estoy tratando de usar form-floating para obtener el aspecto de etiqueta flotante, pero los márgenes se estropean cuando coloco la clase form-floating dentro de una row .
A modo de comparación, esto es sin la row (la etiqueta se ve bien):
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="form-floating col-6 mb-3 mt-3 ml-auto"> <input type="text" class="form-control" id="name"> <label for="name">Name</label> </div> </div> Y esto es con la row : observe cómo la etiqueta "Nombre" ahora toca el lado izquierdo de la entrada:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="form-floating col-6 mb-3 mt-3 ml-auto"> <input type="text" class="form-control" id="name"> <label for="name">Name</label> </div> </div> </div> En este ejemplo mínimo, es posible que no se necesite la row , pero estoy tratando de colocar el formulario en la columna izquierda mientras coloco otro contenido a la derecha. ¿Cómo puedo hacer que esto funcione?
El problema radica en los estilos de cuadrícula. Ver:
.row { /* --bs-gutter-x: 1.5rem; */ /* bs gutter overwrites the form gutter! */ --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(var(--bs-gutter-y) * -1); margin-right: calc(var(--bs-gutter-x) * -.5); margin-left: calc(var(--bs-gutter-x) * -.5); }Solución que funcionó en mi navegador:
Sobrescriba las canaletas en su elemento div contenedor de nuevo a su valor original.
<div class="form-floating col-6 mb-3 mt-3 ml-auto gx-1"> <input type="text" class="form-control" id="name"> <label for="name">Name</label> </div>